<template>
	<view class="tab">
		<scroll-view  class="tab-scoll" scroll-x="true" >
			<view class="tab-scoll_box">
				<view  v-for="(item,index) of tab" :key="item.id" class="tab-scoll_item" :class="{actived:activeIndex===index}" @click="clicktab(item,index)">
					{{item.name}}
				</view>
			</view>			
		</scroll-view>
		<view class="tab-icons">
			<uni-icons type="gear" size="26" color="#666" @click="editLabel"></uni-icons>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			tab:{
			 type:Array,
			 default(){
				 return []
			 }
			},
			tabindex:{
				type:Number,
				default:0
			}
		},
		onLoad(){
			 
		},
		//可以监听data、props值的变化
		watch: {
			tabindex(newValue, oldValue) {
				this.activeIndex=newValue
			}
		},
		data() {
			return {
				activeIndex:0
			};
		},
		methods:{
			clicktab(item,index){
				this.activeIndex=index
				//子组件向父组件传值
				this.$emit("tab",{
					data:item,
					index:index
				})
			},
			//编辑标签
			editLabel(){
				uni.navigateTo({
					url:'/pages/home-label/home-label'
				})
			}
		}
	}
</script>

<style lang="scss">
 .tab{
	 display: flex;
	 width: 100%;
	 border-bottom: 1px #f5f5f5 solid;
	 background-color: #fff; 
	 box-sizing: border-box;
	 .tab-scoll{
		 flex: 1;
		 overflow: hidden;
		 box-sizing: border-box; 
		 .tab-scoll_box{
		 		 display: flex;
		 		 flex-wrap: nowrap;
		 		 height: 45px;
		 		 align-items: center;
		 		  box-sizing: border-box;
		 		  .tab-scoll_item{
		 			  flex-shrink: 0;
		 			  padding: 0 10px;
		 			  color: #333;
		 			  font-size: 14px;
		 		  }
				  .actived{
				  					  color:$mk-base-color;
				  }
		 }
	 }
	 
	 .tab-icons{
		 position: relative;
		 display: flex;
		 justify-content: center;
		 align-items: center;
		 width: 45px;
		 &::after{
			 content: '';
			 position: absolute;
			 top: 12px;
			 bottom: 12px;
			 left: 0;
			 width:1px;
			 background-color: #ddd;
			 
		 }
	 }
	 
 }
</style>
